<template>
    <div class="g-bd5 clear-block">
        <div class="g-mn5">
            <div class="g-mn5c">
                <div class="g-wrap8">
                    <div class="m-timeline-title u-title clear-block">
                        <h3>
                            <span class="f-ff2">动态</span>
                        </h3>
                        <span class="btn u-dicn u-dicn-publish-video-btn f-fr f-pr" title="发布视频"></span>
                        <span class="btn u-dicn u-dicn-publish-dynamic-btn f-fr" title="发动态"></span>
                    </div>
                    <div id="j-flag-newsongbar">
                        <div class="m-newsongbar m-newsongbar-normal f-ff1" hidefocus="true">
                            <i class="nicon"></i>
                            你关注的
                            <div class="facelist">
                                <span class="face">
                                    <img :src="myFriendData.newSongBar.face" :alt="myFriendData.newSongBar.name">
                                </span>

                            </div>
                            {{ myFriendData.newSongBar.name }}发布了新专辑
                            <a class="linktip" href="/friend/newsong">
                                快去看看 >
                            </a>

                        </div>
                    </div>
                    <a class="m-dynamicbar f-ff1" href="" style="display: none;" hidefocus="true">
                        <em>0</em>
                        条新动态
                        <i class="u-icn u-icn-small-down-arrow"></i>
                    </a>
                    <div>
                        <a class="m-dynamicbar f-ff1" style="display: none;" href="javascript:;"></a>
                        <div class="m-timeline">
                            <ul class="m-dlist">
                                <DynamicItem v-for="(item, index) in myFriendData.friendInfoList" key="index"
                                    v-bind="{ ...item }"></DynamicItem>
                            </ul>
                            <div class="u-page"></div>
                            <div></div>
                        </div>
                    </div>

                </div>
            </div>


        </div>
        <Aside v-bind="myInfoData"></Aside>
    </div>
</template>
<script setup>
import DynamicItem from './components/DynamicItem.vue';
import Aside from './components/Aside.vue';
import myFriendData from '@/json_data/friend/my_friend_data.json';
import myInfoData from '@/json_data/friend/my_info_data.json';
</script>

<style lang="scss" scoped>
.g-mn5 {
    .g-mn5c {
        .g-wrap8 {
            .m-timeline-title{
                .btn{
                    cursor: pointer;
                    margin: 6px 0 0 10px;
                    overflow: hidden;
                }
            }

            .m-newsongbar {
                display: block;
                color: #ccc;
                background: #fff;
                border: 1px solid rgba(0, 0, 0, 0.12);
                border-radius: 6px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                letter-spacing: 1px;
                margin: 16px 0;
                padding: 0 16px 0 12px;

            }




            .m-newsongbar-normal {
                background: rgba(35, 93, 157, 0.10);
                color: #000;
                text-align: left;

                .nicon {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    background-image: url(../../assets/friend_img/iconnew80@2x.png);
                    background-size: contain;
                    vertical-align: top;
                    margin-top: 7px;
                    margin-right: 2px;
                }

                .facelist {
                    display: inline-block;
                    height: 16px;
                    margin: 11px 2px 0 6px;
                    vertical-align: top;

                    .face {
                        display: block;
                        width: 16px;
                        height: 16px;
                        border-radius: 16px;
                        overflow: hidden;
                        margin-left: -4px;
                        float: right;
                    }
                }

                a {
                    color: #235d9d;
                    float: right;
                }
            }

            .m-dynamicbar {
                display: block;
                color: #666;
                background: #fffcdf;
                border: 1px solid #f0eb98;
                padding: 8px 0;
                text-align: center;
                letter-spacing: 1px;

                .u-icn {
                    margin-left: 6px;
                }

                &:hover {
                    background: #fffbcf;
                    border-color: #dfd63b;
                    text-decoration: none;
                }
            }

            .m-timeline {
                position: relative;
                zoom: 1;
                text-shadow: none;

                .upage {
                    margin: 20px 0;
                    text-align: center;
                }

                .m-dlist {
                    position: relative;
                    zoom: 1;

                    .ficon:after,
                    .pics .pic:after,
                    .src .cover:after,
                    .src-mv .mv:after,
                    .activity:after,
                    .hotrecmt .cover:after {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        box-sizing: border-box;
                        border: 1px solid rgba(0, 0, 0, 0.1);
                        z-index: 100;
                        pointer-events: none;
                    }

                    .pics .pic,
                    .showpic .slide {
                        background-repeat: no-repeat;
                        background-position: center center;
                    }

                    .card,
                    .hotrecmt .bar,
                    .showpic {
                        background: #f5f5f5;
                    }


                    .item:first-child {
                        border-top: none;
                    }




                }
            }


        }
    }
}
</style>